<template>
    <div class="payout">
        <div class="bg">
            <div class="money">
                <div class="font">可提现金额（￥）</div>
                <div class="num">{{ countMoney }}</div>
            </div>
            <div class="box">
                <div class="content">
                    <div class="desc">提现金额</div>
                    <div class="payouts_money">
                        <van-field center label="￥" size="large" label-width="1rem" placeholder="单次提现金额不能低于10元"
                            v-model="payoutNum" readonly clickable @touchstart.stop="show = true" />
                        <van-number-keyboard v-model="payoutNum" :show="show" :maxlength="3" @blur="show = false" />
                    </div>
                    <div class="type flex-row">
                        <div class="type_font">提现至</div>
                        <div class="type_icon flex-row">
                            <div class="icon">
                            </div>
                            <div class="word">支付宝</div>
                        </div>
                    </div>
                </div>
                <div class="btn" @click="handleWithdraw()">立即提现</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { showSuccessToast, showToast,closeToast } from "vant";
// import { userStore } from "@/store/userInfo";
import { getAuthInfo } from "@/api/auth";
import { withdraw } from "@/api/payouts";
import { getWithdrawableAmount } from "@/api/loginApi";
import { ref,onMounted } from 'vue'
const show = ref(false);
// const userMsg = userStore()
// const { userInfo } = userMsg
const payoutNum = ref<number | string>();
const accountVal = ref('')
const countMoney = ref('')
onMounted(() => {
    getMoney()
    getAuthDetail()
})
// 获取可提现金额
const getMoney = async() => {
    const res = await getWithdrawableAmount()
    countMoney.value = res.data.cumulativeIncome
}
// 获取认证信息
const getAuthDetail = async () => {
    const res = await getAuthInfo();
    const { account } = res.data;
    accountVal.value = account
};
// 提现
const handleWithdraw = async () => {
    if(Number(payoutNum.value)) {
        if (Number(payoutNum.value) < 10) {
        showToast('单次提现金额不能低于10元')
    } else {
        const params = {
            amount: Number(payoutNum.value),
            trading_account: accountVal.value,
            trading_type: 'ALIPAY',
        }
        await withdraw(params)
        getMoney()
        payoutNum.value = ''
        showSuccessToast('提现成功')
        setTimeout(() => {
            closeToast()
        }, 1500)
    }
    }else {
        showToast('请输入提现金额')
    }

}
</script>
<style lang="less" scoped>
@import "./payouts.less";
</style>